<template>
  <div class="main">
    <div class="login_box os-center_box">
      <h2 class="title">登 录</h2>
      <el-form :model="form" ref="dataFormRef" class="body" :rules="rules">
        <el-form-item prop="username">
          <el-input size="large" placeholder="请输入账号" v-model="form.username" :prefix-icon="User" clearable
            @keyup.enter="onSubmit" maxlength="20" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input size="large" placeholder="请输入密码" v-model="form.password" :prefix-icon="Lock" clearable
            @keyup.enter="onSubmit" type="password" show-password maxlength="20" />
        </el-form-item>
        <div class="footer">
          <div class="button_box">
            <el-button size="large" class="login_button" type="primary" @click="onSubmit"
              :loading="btnLoading">登录</el-button>
            <div class="auto_button_box">
              <el-button size="large" class="login_button" @click="autoFill">自动填写</el-button>
              <el-button size="large" class="login_button" @click="clearable">清空</el-button>
            </div>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { User, Lock } from '@element-plus/icons-vue'
import { useUserStore } from "@/store/modules/user"
const $router = useRouter()
const userStore = useUserStore()


const rules = {
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
}
const form = reactive({
  username: '',
  password: ''
})

const btnLoading = ref(false)
const dataFormRef = ref()
const onSubmit = async () => {
  let submitFlag = true
  btnLoading.value = true

  const valid_1 = await dataFormRef.value.validate().catch(() => false)
  if (!valid_1) {
    submitFlag = false
  }

  if (submitFlag) {
    let res_login = await userStore.login(form).catch(() => false)
    if (!res_login) return btnLoading.value = false
    const params = new URLSearchParams(location.search);
    const paramsObj = {} as any;
    for (const [key, value] of params) {
      paramsObj[key] = value;
    }
    $router.push(paramsObj.redirect || '/')
  } else {
    btnLoading.value = false
  }
}

const autoFill = () => {
  form.username = 'admin'
  form.password = '123456'
}
const clearable = () => {
  form.username = ''
  form.password = ''
}
</script>
<style lang="scss" scoped>
.main {
  width: 100vw;
  height: 100vh;
  background: #fff url('@/assets/images/login_bg.png') no-repeat center center fixed;
  background-size: cover;

  .login_box {
    width: 300px;
    border: 1px solid #dedede;
    background-color: #ffffffcc;
    padding: 0 20px;
    height: 400px;
    border-radius: 10px;
    text-align: center;

    .title {
      padding: 20px;
    }

    .body {
      margin: 20px 0 0;
    }

    .footer {
      // position: absolute;
      // bottom: 0;
      // width: calc(100% - 40px);
      width: 100%;
      margin-top: 30px;

      :deep(.el-form-item__content) {
        justify-content: center;

      }

      .button_box {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 10%;

        .login_button {
          margin: 0;
        }

        .auto_button_box {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-gap: 2.5%;
        }
      }
    }
  }
}
</style>